<link rel="stylesheet" href="ccay/example/demo.css"  type="text/css" />
<script type="text/javascript" src="ccay/example/demo.js" charset="utf-8"></script>
<script type="text/javascript" src="ccay/example/ui/igrid/renderFunction.js" charset="utf-8"></script>
<style type="text/css">
h5{font-size: 13px; font-weight: normal; line-height: 23px; float: right;}
h6{font-size: 13px; color: red; float: left; line-height: 13px;}
.showClew{font-size: 12px; color: olive;}
.showClew span{color: peru;}
.spanShow{color: peru;}
</style>
<div id="renderFunctionDemo">
	<!-- API区 -->
	 <div title='API' tabid='tab1'><br />
	 	<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api1')">1.IGrid内置渲染器type(renderer)属性配置表</a></h2>
		<div style="display:none" id="api1">
			<form class="init ccay-form">
			<div class="ccay-form-body ccay-form-custom">
				<ul>		
					<li class="ccay-form-row">
						<samp><h3>内置类型</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.renderFunction.openDemo('tab2');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="integer"></samp>	
						<span class="ccay-form-input">设置该列显示为整数类型。<br><h6>示例：columns:[{type:'integer'}];</h6><br></span>	
					</li>	
					<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="number"></samp>
						<span class="ccay-form-input">设置该列显示为数字类型。<br><h6>示例：columns:[{type:'number', format:{fraction: 1}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fraction"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的数字类型的小数位数，默认为2位小数</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="currency"></samp>
						<span class="ccay-form-input">设置该列显示为钱币类型。<br><h6>示例：columns:[{type:'currency', format:{fraction: 1, flag: '￥[currency]'}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fraction"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的数字类型的小数位数，默认为2位小数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="flag"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的钱币类型的符号，格式为：'$[currency]'，默认为null</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="currencystr"></samp>
						<span class="ccay-form-input">设置该列可显示大钱币类型(支持大于15位,传入类型必须是字符串类型)。<br><h6>示例：columns:[{type:'currencystr', format:{fraction: 1, flag: '￥[currencystr]'}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fraction"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的数字类型的小数位数，默认为2位小数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="flag"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的钱币类型的符号，格式为：'$[currencystr]'，默认为null</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="date"></samp>
						<span class="ccay-form-input">设置该列显示为日期类型。<br><h6>示例：columns:[{type:'date', format:{dateFormat: 'yyyy/MM/dd', renderFormat: 'yyyy年MM月dd日'}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="dateFormat"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的日期类型的格式，默认为：日期类型'yyyy-MM-dd'或者日期时间类型'yyyy-MM-dd hh:mm:ss'</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="renderFormat"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的日期类型的格式，同dateFormat属性功能一样，但优先级高于dateFormat属性</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="datetime"></samp>
						<span class="ccay-form-input">设置该列显示为日期时间类型。对该列进行格式化设置同date类型一致<br><h6>示例：columns:[{type:'date', format:{dateFormat: 'yyyy/MM/dd hh:mm:ss', renderFormat: 'yyyy年MM月dd日 hh:mm:ss'}}];</h6><br></span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="bool"></samp>
						<span class="ccay-form-input">设置该列显示为布尔类型。<br><h6>示例：columns:[{type:'bool', format:{htmlView: false}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="htmlView"></samp>
										<span class="ccay-form-input">{Boolean} 设置该列是否显示的试图，默认为true</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="noFork"></samp>
										<span class="ccay-form-input">{Boolean} 设置该列是否不显示叉，默认为true</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="ellipsis"></samp>
						<span class="ccay-form-input">设置该列显示为缩略类型。<br><h6>示例：columns:[{type:'ellipsis', format:{len: 50}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="len"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的缩略类型所显示的字符个数</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="longtext"></samp>
						<span class="ccay-form-input">设置该列显示为长文本类型。<span class="showClew">当wrap为true时，根据设置高度显示竖向滚动条；当wrap不为true时，显示气泡提示框</span><br><h6>示例：columns:[{renderer:'longtext', format:{height: 50}}];或者columns:[{type:'longtext'}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="height"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的长文本的高度</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="ldap"></samp>
						<span class="ccay-form-input">设置该列显示为人员类型。<br><h6>示例：columns:[{type:'ldap'}];</h6><br></span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="enum"></samp>
						<span class="ccay-form-input">设置该列显示为lookup类型。<br><h6>示例：columns:[{type:'enum', format:{code: ''}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="supportLang"></samp>
										<span class="ccay-form-input">{Boolean} 设置该列显示的lookup类型是否支持国际化</span>
			                		</li>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="code"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的lookup类型的动态数据源</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="enum"></samp>
						<span class="ccay-form-input">设置该列显示为枚举类型。<br><h6>示例：columns:[{type:'enum', format:{service: '', data: '', valueField: 'code', displayField: 'name', cacheKey: 'render_data'}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="service"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的枚举类型的动态数据源，具体配置将在《选择组件 >下拉框API》中描述
											<h5><a onclick="Ccay.Page.forward('ccay/example/ui/combobox/combobox.html');">点击查看</a></h5>
										</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="data"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的枚举类型的静态数据源</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="valueField"></samp>
										<span class="ccay-form-input">{String} 设置该列枚举类型的值，默认为：'value'</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="displayField"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的枚举类型的文本，默认为：'display'</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="cacheKey"></samp>
										<span class="ccay-form-input">{String} 设置该列显示的枚举类型的数据源缓存key值</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="childRender"></samp>
						<span class="ccay-form-input">设置该列显示为子渲染类型。<br><h6>示例：columns:[{type:'childRender'}];</h6><br></span>
               		</li>
               		<li class="ccay-form-row">
                      	<samp class="i18n" i18nKey="rate"></samp>
						<span class="ccay-form-input">设置该列显示为比率类型。<br><h6>示例：columns:[{type:'rate', format:{total: 100, fraction: 1, htmlView: true, section: [20, 50, 70]}}];</h6><br>
							format：{Object} 在columns属性中配置，对该列所显示的数据类型进行格式化
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="total"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的比率类型的总数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="fraction"></samp>
										<span class="ccay-form-input">{Number} 设置该列显示的比率类型的小数位数，默认为2位小数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="section"></samp>
										<span class="ccay-form-input">{Array} 设置该列显示的比率类型的界限</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="htmlView"></samp>
										<span class="ccay-form-input">{Boolean} 设置该列是否显示的试图，默认为false</span>
			                		</li>
			                	</ul>
			                </div>
						</span>
               		</li>
				</ul>
			</div>
			</form>
		</div><br />
		
		<h2 style="cursor: pointer;"><a onclick="Ccay.Common.toggle(this,'#api2')">2.IGrid自定义渲染器renderer属性配置表</a></h2>
		<div style="display:none" id="api2">
			<form class="init ccay-form longtitle">
			<div class="ccay-form-body ccay-form-custom">
				<ul>		
					<li class="ccay-form-row">
						<samp><h3>相关API</h3></samp>
						<span class="ccay-form-input"><h3 style="float: left;">描述</h3><h5><a onclick="Ccay.example.ui.igird.renderFunction.openDemo('tab3');">点击查看Demo</a></h5></span>
					</li>
					<li class="ccay-form-row">
						<samp class="i18n" i18nKey="Ccay.UI.Renderer.create(renderOps)"></samp>	
						<span class="ccay-form-input">创建该列自定义渲染器，示例<br><h6>var renderOps = {getFormat:function(){}...需重写的方法};<br>columns:[{renderer:Ccay.UI.Renderer.create(renderOps)}];</h6><br><br>
							根据实际情况需要重写以下方法进行自定义，renderOps的配置重写方法如下：<br />
							<div class="ccay-form-body">
	                           	<ul></ul>
	                        </div>
							<div class="ccay-form-custom">
								<ul>
									<li class="ccay-form-row">
		                        		<samp><h3>重写方法</h3></samp>
				                		<span class="ccay-form-input"><h3>描述</h3></span>
			                		</li>
									<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="setOption(op)"></samp>
										<span class="ccay-form-input">设置渲染器的参数<br>op：{Object} 列columns的属性参数</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="initFormat(format)"></samp>
										<span class="ccay-form-input">初始化format值<br>format：{Object} 列columns的format属性值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="getFormat(field, format)"></samp>
										<span class="ccay-form-input">初始化时，返回设置页面显示格式<br>field：{String} 列columns的field属性值<br>format：{Object} 列columns的format属性值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="getValue(target, format)"></samp>
										<span class="ccay-form-input">编辑之前，返回获取该列的值<br>target：{Object} 该单元格对象<br>format：{Object} 列columns的format属性值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="getText(target)"></samp>
										<span class="ccay-form-input">编辑之前，返回获取该列的文本<br>target：{Object} 该单元格对象</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="parse(value)"></samp>
										<span class="ccay-form-input">编辑之后，返回该列的值<br>value：{String} 编辑之后的值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="format(value, format)"></samp>
										<span class="ccay-form-input">编辑之后，返回设置页面显示的格式<br>value：{Object} 编辑之后的值<br>format：{Object} 列columns的format属性值</span>
			                		</li>
			                		<li class="ccay-form-row">
		                        		<samp class="i18n" i18nKey="render(target, value, format)"></samp>
										<span class="ccay-form-input">编辑之后，设置页面显示的格式<br>target：{Object} 该单元格对象<br>value：{Object} 编辑之后的值<br>format：{Object} 列columns的format属性值</span>
			                		</li>
								</ul>
							</div>
						</span>	
					</li>			
				</ul>
			</div>
			</form>
		</div>
	 </div>
	 
	 <!-- Demo区 -->
	 <div title='IGrid内置渲染器功能' tabid='tab2'>
	 	<span class="showClew">备注：IGrid内置渲染器功能Demo介绍内置的11种渲染数据类型，默认为字符串类型</span><br /><br />
	 	<div id="iStudent1"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html1'>&lt;div id="igridDemo1">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js1'>
var gridParam1 = {
	height: 347,
	columns: [
	 //<span class="showClew"> 不定义type说明显示的数据类型为默认的字符串类型；若定义renderer，则优先显示renderer定义的数据类型</span>
	 {field: 'name', width:70, header: "string"},
	 
	 //<span class="showClew"> type: 'bool'说明显示的数据类型为布尔类型；format: {htmlView: true}说明该列显示为图标格式</span>
	 {field: 'sex', width:50, header: "bool", type: 'bool', format: {htmlView: true}},
	 
	 //<span class="showClew"> type: 'integer'说明显示的数据类型为整数类型</span>
	 {field: 'age', width:60, header: "integer", type: 'integer'},
	 
	 //<span class="showClew"> type: 'number'说明显示的数据类型为数字类型；format:{fraction: 2}说明显示的数字类型有2位小数</span>
	 {field: 'tuition', width:70, header: "number", type: 'number', format: {fraction: 2}},
	 
	 //<span class="showClew"> type: 'currency'说明显示的数据类型为钱币类型；fraction:2 说明显示的钱币类型有2位小数；flag:'￥[currency]' 说明显示的钱币符号为：￥</span>
	 {field: 'tuition', width:70, header: "currency", type: 'currency', format: {fraction: 2, flag: '￥[currency]'}}, 
	 
	 //<span class="showClew"> type: 'currencystr'说明显示的数据类型为大钱币类型(支持大于15位,传入类型必须是字符串类型)；fraction:2 说明显示的钱币类型有2位小数；flag:'￥[currencystr]' 说明显示的钱币符号为：￥</span>
	 {field: 'attr5', width:70, header: "currencystr", type: 'currencystr', format: {fraction: 2, flag: '￥[currencystr]'}}, 
	 
	 //<span class="showClew"> type: 'rate'说明显示的数据类型为比率类型；total: 1 说明显示的数据类型为比率类型总数；fraction:1 说明显示的比率类型有1位小数；htmlView:true 说明显示的比率类型显示试图</span>
	 {field: 'tuition', width:90, header: "rate", type: 'rate', format: {total: 1, fraction: 1, htmlView: true, section: [20, 50, 60]}},
	 
	 //<span class="showClew"> type: 'date'说明显示的数据类型为日期类型；format: {dateFormat: 'yyyy-MM-dd'}说明该列显示的日期格式为：'yyyy-MM-dd'；若定义renderFormat，则优先显示renderFormat定义的数据格式</span>
	 {field: 'birthday', width:70, header: "date", type: 'date', format: {dateFormat:'yyyy-MM-dd'}},
	 
	 //<span class="showClew"> type: 'datetime'说明显示的数据类型为日期时间类型；format: {renderFormat: 'MM/dd/yyyy hh:mm'}说明该列显示的日期格式为：'MM/dd/yyyy hh:mm'</span>
	 {field: 'lastUpdateDate', width:120, header: "datetime", type: 'datetime', format: {renderFormat: 'MM/dd/yyyy hh:mm'}},
	 
	 //<span class="showClew"> type: 'enum'说明显示的数据类型为lookup类型；supportLang说明lookup支持国际化；code: ""说明显示的数据类型为lookup类型的动态数据源</span>
	 {field: 'province', width:70, header: "enum", type: 'enum', format: {supportLang: true, code: "province"}},
	 
	 //<span class="showClew"> type: 'enum'说明显示的数据类型为枚举类型；service: ""说明显示的数据类型为枚举类型的动态数据源；cacheKey: ""说明显示的数据类型为枚举类型的数据源缓存key值；valueField: "pCode"说明显示的数据类型为枚举类型的值；displayField: "pName"说明显示的数据类型为枚举类型的显示文本</span>
	 {field: 'address', width:110, header: "enum", showTip: true, type: 'enum', format: {service: 'FN:Ccay.example.ui.igird.renderFunction.provinceData', cacheKey: "render_provinceData", valueField: "pCode", displayField: "pName"}}, 
	 
	 //<span class="showClew"> renderer: 'ellipsis'说明显示的数据类型为缩略类型；format: {len: 20}说明显示20个字符，其余省略</span>
	 {field: 'blog', width:120, header: "ellipsis", renderer: 'ellipsis', format: {len: 20}},
	 
	 //<span class="showClew"> type: 'longtext'说明显示的类型为长文本类型，显示提示框</span>
	 {field: 'blog', width:150, header: "longtext", type: 'longtext'}
	],
	ajax:{
		url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};
		
$("#igridDemo1").igrid(gridParam1);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#renderFunctionDemo',$('#js1').html(),$('#html1').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <div title='IGrid自定义渲染器功能' tabid='tab3'>
	 	<span class="showClew">备注：IGrid自定义渲染器功能Demo，通常渲染器显示和自定义渲染器显示的对比</span><br /><br />
	 	<div id="iStudent2"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html2'>&lt;div id="igridDemo2">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js2'>
//<span class="showClew"> sBlog(render)列自定义渲染器参数设置</span>
var showBlogProto = {
	//<span class="showClew"> getFormat初始化时，返回设置页面显示格式；${blog}field值为blog列的值</span>
	getFormat: function (field, format) {
		return "&lt;a href='${blog}'>${blog}&lt;/a>";
   	},
   	
   	//<span class="showClew"> format编辑之后，返回设置页面显示的格式；format.flag自定义前缀</span>
   	format: function (value, format){
   		if(!format) format = {};
   		if(value.substr(0,7) != format.flag){
   			value = format.flag + value;
   		}
   		return "&lt;a href='{0}'>{1}&lt;/a>".formatValue(value, value);
   	},
   	
   	//<span class="showClew"> render编辑之后，设置页面显示的格式</span>
   	render: function (target, value, format) {
		target.html(this.format(value,format));
   	}
};

//<span class="showClew"> lastUpdatedDate(render)列自定义渲染器参数设置</span>
var showLastDate = {
	//<span class="showClew"> getFormat初始化时，返回设置页面显示格式</span>
	getFormat: function (field, format){
		return "${Ccay.Format.toDateBefore({0})}".formatText(field);
	}
}

var gridParam2 = {
	height: 347,
	editMode: true,
	allowFreezen: false,
	wrap: true,
	columns: [
	 //<span class="showClew"> renderer: "longtext"设置该列是长文本类型；editorOp: {type: 'textarea'}设置该列编辑器是文本域类型</span>
	 {field: 'blog', width:170, header: "sBlog(normal)", editorOp: {type: 'textarea'}, renderer: "longtext", format: {height: "50px"}},
	 
	 //<span class="showClew"> format:{flag:'http://'}设置自定义前缀；renderer: Ccay.UI.Renderer.create(showBlogProto)设置自定义渲染器</span>
	 {field: 'blog', width:170, header: "sBlog(render)", editorOp: {type: 'textarea'}, format:{flag:'http://'}, renderer: Ccay.UI.Renderer.create(showBlogProto)},
	 
	 {field: 'lastUpdateDate', width:170, header: "lastUpdatedDate(normal)", editable: false, type: 'datetime'},
	 
	 //<span class="showClew"> renderer: Ccay.UI.Renderer.create(showLastDate)设置自定义渲染器</span>
	 {field: 'lastUpdateDate', width:170, header: "lastUpdatedDate(render)", editable: false, type: 'datetime', renderer: Ccay.UI.Renderer.create(showLastDate)}
	],
	ajax:{
	   	url: 'services/ccay/demo/student/list/page/${pageSize}/${curPage}/${orderBy}'
	}
};

$("#igridDemo2").igrid(gridParam2);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#renderFunctionDemo',$('#js2').html(),$('#html2').html())">亲自试一试</a>
		</div>
	 </div>
	 
	 <div title='IGrid行渲染功能' tabid='tab4'>
	 	<span class="showClew">备注：IGrid根据单元格文本的值设置整行颜色</span><br /><br />
	 	<div id="iStudent3"></div>
	 	<h3>html Code</h3>
	  	<span></span>
	  	<div class="codeArea">
	  		<pre id='html3'>&lt;div id="igridDemo3">&lt;/div></pre>
	  	</div>
	  	<h3>js Code</h3>
      	<span></span>
      	<div class="codeArea">
      		<pre id='js3'>
var gridParam3 = {
	height: 130,
	
	//<span class="showClew"> editMode: true 开启编辑模式并且rowEdit: true 才可开启行编辑模式，默认为false</span>
	editMode: true,
	rowEdit: true,
	showPager: false,
	columns: [
	 {field: 'name', width:100, header: "string"},
	 {field: 'sex', width:70, header: "bool", type: 'bool'},
	 {field: 'age', width:90, header: "integer", type: 'integer'},
	 {field: 'tuition', width:100, header: "currency", type: 'currency', format:{fraction:2, flag:'￥[currency]'}},
	 {field: 'birthday', width:100, header: "date", type: 'date'},
	 {field: 'province', width:100, header: "enum", type: 'enum', format: {supportLang: true, code: "province"}},
	 {field: 'blog', width:140, header: "textarea", type: 'textarea'}
    ],
        //<span class="showClew"> 渲染行设置颜色</span>
	fnRenderRow: function(row, data, i){
		var text = this.getRowCell(row, 1).text();
			   if(text == "111"){
			    	row.css("background-color","#90F880");
			    }else if(text == "222"){
			    	row.css("background-color","#ff6600");
			    }else if(text == "333"){
			    	row.css("background-color","green");
			    }else if(text == "444"){
			    	row.css("background-color","yellow");
			    }else if(text == "555"){
			    	row.css("background-color","#ffcc66");
			    }
   }
};

var datas=[
		       {'name':"111",'sex':true,'age':21,'tuition':null,'birthday':null,'province':'广东省','blog':null},
		       {'name':"222",'sex':false,'age':23,'tuition':null,'birthday':null,'province':'湖南省','blog':null},
		       {'name':"333",'sex':true,'age':31,'tuition':null,'birthday':null,'province':'河南省','blog':null},
		       {'name':"444",'sex':true,'age':19,'tuition':null,'birthday':null,'province':'四川省','blog':null},
		       {'name':"555",'sex':false,'age':25,'tuition':null,'birthday':null,'province':'山东省','blog':null}
		  ];

$("#igridDemo3").igrid(gridParam3,datas);
      		</pre>
      	</div>
      	<div class="try">
			<a onclick="Ccay.example.openTry('#renderFunctionDemo',$('#js3').html(),$('#html3').html())">亲自试一试</a>
		</div>
	 </div>
	 <!-- Try区 -->
	 <div title="试一试" tabid="trytab" >
	    <fieldset class='ccay-demo'>
	    <legend ><h2>代码区</h2></legend>
		   
		   <span>请在下面的文本框中编辑您的代码，然后单击此按钮测试结果  ————></span><input value="try it yourself" type="button" onclick="Ccay.example.runDemo()" /> 

				<div>
				    <table  style="width:100%;">
				      <tr>
				        <td style="width:100%;">
						<h3>js Code:</h3>	
						  <!-- 高度按需来调整。默认最小应为100px -->					
	                      <textarea id="jsTxt" style="height:400px;width:99%;"></textarea>
	                    </td>   
	                  </tr>
	                  <tr>
	                    <td style="width:100%;">
						<h3>html Code:</h3>
						  <!-- 高度按需来调整。默认最小应为100px -->
	                      <textarea id="htmlTxt" style="height:100px;width:99%;"></textarea>
	                    </td>
	                  </tr> 
                    </table>
				</div>
           </fieldset>
        <fieldset class='ccay-demo'>
          <legend ><h2>结果区</h2></legend>
			<div>
				<div style="overflow:auto;" id="demoMainPanel"></div>
			</div>
        </fieldset>
     </div>
	 
	 <!-- FAQ区 -->
	 <div title="FAQ">
		  <form class="init ccay-form">
		    <div class="ccay-form-body">
		    <ul>
		    	<li class="ccay-form-row">
			      <samp><h3>问题</h3></samp>
			      <span class="ccay-form-input">
			               <h3>解决方案</h3>
			      </span>
			    </li>
		    </ul>
			</div>     
			<div class="ccay-form-custom">
			    <ul>                     
			        <!-- 若问题和内容较多，可在li中的class加上ccay-form-whole -->
			        <li class="ccay-form-row">
			                          <samp class="i18n" i18nKey=""></samp>                          
			                         <span class="ccay-form-input"></span>
			        </li>  
			    </ul>
			</div>
		  </form>                    
    </div> 
	 
</div>